<template>
  <div class="container">
    <router-view class="main" />
    <van-tabbar :fixed="false" route v-show="isShow">
      <van-tabbar-item
        icon="home-o"
        :to="{
          name: 'Home',
        }"
        >首页</van-tabbar-item
      >
      <van-tabbar-item
        icon="fire-o"
        :to="{
          name: 'List',
        }"
        >宝贝</van-tabbar-item
      >
      <van-tabbar-item
        icon="cart-o"
        :to="{
          name: 'Cart',
        }"
        :badge="cartCount > 0 ? cartCount : ''"
        >购物车</van-tabbar-item
      >
      <van-tabbar-item
        icon="user-o"
        :to="{
          name: 'User',
        }"
        >我的</van-tabbar-item
      >
    </van-tabbar>
  </div>
</template>
<script>
import { loadCartsAPI } from "./services/carts";
export default {
  data() {
    return { isShow: true, cartCount: 0 };
  },
  created() {
    this.$eventBus.$on("updateCartCount", this.loadCartCount);
  },
  watch: {
    $route(v) {
      //监听路由变化，设置底部tabbar是否显示
      if (v.meta.hideTabBar) {
        this.isShow = false;
      } else {
        this.isShow = true;
      }
    },
  },
  methods: {
    async loadCartCount() {
      const res = await loadCartsAPI();
      this.cartCount = res.data.reduce((pre, cur) => pre + cur.amount, 0);
    },
  },
};
</script>

<style lang="scss"></style>
